<template>
  <div id="ss">
      <div class="ss1">
          <div class="ss2">
          <img src="../assets/fh.png" alt="">
          <input type="text" placeholder="请输入搜索关键字">
            <router-link :to="{
            name:'Home'
            }">
          <span>取消</span>
            </router-link>
          </div>
      </div>
      <div class="ss3">
          <p class="p1">热门搜索</p>
          <ul>
              <li v-for="(item) in ssList" :key="item.object_id">
                  <span>{{item.title}}</span>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            ssList:[]
        }
    },
    created() {
        this.$axios.get('hot_words?_type=h5').then((res) => {
            console.log(res.data);
            this.ssList = res.data.data
        })
    }
}
</script>

<style>
.ss1{
    height: 5rem /* 80/16 */;
    /* background-color: pink; */
    position: relative;
}
.ss2{
    width: 18.125rem /* 290/16 */;
    height: 2.5rem /* 40/16 */;
    background-color: #fff;
    /* background-color: chartreuse; */
    position: absolute;
    top: 1.25rem /* 20/16 */;
    left: .9375rem /* 15/16 */;
    border-radius: 0.2rem;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(0,0,0,.1);
}
.ss2 img{
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -.125rem /* 2/16 */;
}
.ss2 input{
    width: 15.3125rem /* 245/16 */;
    height: 2.5rem /* 40/16 */;
    border: .0625rem /* 1/16 */ solid #fff;
    border-radius: .25rem;
    font-size: .875rem;
    position: absolute;
    top: 0rem /* 0/16 */;
    left: 2.8125rem /* 45/16 */;
}
.ss2 span{
    width: 1.875rem /* 30/16 */;
    height: 1.0625rem /* 17/16 */;
    /* border: 1px solid black; */
    font-size: .875rem;
    color: #666;
    position: absolute;
    top: .6875rem /* 11/16 */;
    left: 19.0625rem /* 305/16 */;
}
.ss3{
    height: 18.75rem /* 300/16 */;
    /* background-color: pink; */
    overflow: hidden;
}
.ss3 p{
    font-size: 1.125rem;
    color: #666;
    font-weight: 700;
    margin-left: .625rem /* 10/16 */;
}
.ss3 ul li span{
    font-size: .8125rem /* 13/16 */;
    color: inherit;
}
.ss3 ul li{
    width: 6.25rem /* 100/16 */;
    height: 1.875rem /* 30/16 */;
    background-color: #efefef;
    float: left;
    margin: .3125rem /* 5/16 */ .75rem /* 12/16 */;
    text-align: center;
    overflow: hidden;
    line-height: 1.875rem /* 30/16 */;
    border-radius: .25rem;
}
</style>